<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader title="用章信息" hidden-breadcrumb/>
        </div>
        <!--    公共筛选查询区域-->
        <Card :bordered="false" dis-hover>
            <!--新增-->
            <div class="buttonContain">
                <Button @click="handleOpenCreate" type="primary">新增</Button>
            </div>
        </Card>
        <!--总卡片区域-->
        <Card :bordered="false" dis-hover class="ivu-mt">
            <!--切换table区域-->
            <Tabs type="card" v-model="activeName" :animated="false">
                <TabPane label="已审核" name="yes">
                    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth"
                          :label-position="labelPosition">
                        <Row :gutter="24" type="flex" justify="end">
                            <Col v-bind="grid">
                                <FormItem label="物品名称：">
                                    <Input v-model="data.adtrtName" placeholder="请输入关键字"/>
                                </FormItem>
                            </Col>
                            <Col v-bind="grid" class="ivu-text-right">
                                <FormItem>
                                    <Button type="primary" @click="getDataYes">查询</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <!--数据渲染区域-->
                    <div class="i-table-no-border">
                        <!--        <Button type="primary" icon="md-add" @click="handleOpenCreate">新增</Button>-->
                        <Table
                                ref="table"
                                :columns="columnsListYes"
                                :data="dataWithPage"
                                :loading="loading"
                        >
                            <template slot-scope="{ row }" slot="slotUsersName">
                               <span v-for="item in row.users">
                                   {{item.nickName}}
                               </span>
                            </template>
                            <!--审核时间-->
                            <template slot-scope="{ row }" slot="adminAudit">
                             <span >
                                   {{row.administrativeAudit.auditTime}}
                             </span>
                            </template>
                            <template slot-scope="{ row }" slot="ifPass">
                                <Badge v-if="row.administrativeAudit.auditAdvice === '1'" status="success" text="同意"/>
                                <Badge v-if="row.administrativeAudit.auditAdvice === '2'" status="error" text="拒绝"/>
                            </template>
                            <template slot-scope="{ row }" slot="SlotZhangType">
                                <span v-if="row.zhangType === '1'">公章</span>
                                <span v-if="row.zhangType === '2'">合同章</span>
                                <span v-if="row.zhangType === '3'">其他</span>
                            </template>
                            <template slot-scope="{ row }" slot="action">
                                <a @click="showDownDetail(row.adtrtId)">审核详情</a>
                                <Divider type="vertical"/>
                                <a @click="handleDelete(row.adtrtId)" :style="{'color':'red'}">删除</a>
                            </template>
                        </Table>
                        <div class="ivu-mt ivu-text-center">
                            <Page :total="limitData.length" show-elevator :current.sync="current" show-total/>
                        </div>

                    </div>
                </TabPane>
                <TabPane label="未审核" name="no">
                    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth"
                          :label-position="labelPosition">
                        <Row :gutter="24" type="flex" justify="end">
                            <Col v-bind="grid">
                                <FormItem label="物品名称：">
                                    <Input v-model="data.adtrtName" placeholder="请输入关键字"/>
                                </FormItem>
                            </Col>
                            <Col v-bind="grid" class="ivu-text-right">
                                <FormItem>
                                    <Button type="primary" @click="getDataNo">查询</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <!--数据渲染区域-->
                    <div class="i-table-no-border">
                        <!--        <Button type="primary" icon="md-add" @click="handleOpenCreate">新增</Button>-->
                        <Table
                                ref="table"
                                :columns="columnsListNo"
                                :data="dataWithPageNo"
                                :loading="loading"
                        >

                            <template slot-scope="{ row }" slot="slotUsersName">
                               <span v-for="item in row.users">
                                   {{item.nickName}}
                               </span>
                            </template>

                            <template slot-scope="{ row }" slot="ifPass">
                                <Badge v-if="row.auditAdvice === '1'" status="success" text="同意"/>
                                <Badge v-if="row.auditAdvice === '2'" status="error" text="拒绝"/>
                            </template>
                            <template slot-scope="{ row }" slot="SlotZhangType">
                                    <span v-if="row.zhangType === '1'">公章</span>
                                <span v-if="row.zhangType === '2'">合同章</span>
                                <span v-if="row.zhangType === '3'">其他</span>
                            </template>
                            <template slot-scope="{ row}" slot="action">
                                <a @click="showAuditDetail(row.adtrtId)">申请详情</a>
                                <Divider type="vertical"/>
                                <a @click="goReview(row.adtrtId)" :style="{'color':'#4AABF2'}">去审核</a>
                                <Divider type="vertical"/>
                                <a @click="handleDelete(adtrtId)" :style="{'color':'red'}">删除</a>
                            </template>
                        </Table>
                        <div class="ivu-mt ivu-text-center">
                            <Page :total="limitDataNo.length" show-elevator :current.sync="current" show-total/>
                        </div>

                    </div>
                </TabPane>
            </Tabs>
        </Card>

    </div>

</template>

<script>
    import {mapState} from 'vuex';
    import Administrative from "@/api/Administrative";

    export default {
        data() {
            return {
                grid: {
                    xl: 8,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                activeName: 'yes',
                data: {
                    status: '',
                    adtrtName: '',
                },
                //验证规则
                rules: {},
                dayak: [],
                count: 10,
                current: 1,
                list: [],
                listNo: [],
                size: 10,
                datalist: [],
                columnsListYes: [
                    {
                        title: '序号',
                        key: 'adtrtId',
                        minWidth: 80

                    },
                    {
                        title: '姓名',
                        slot: 'slotUsersName',
                        minWidth: 80

                    },
                    {
                        title: '用印文件名',
                        key: 'adtrtName',
                        minWidth: 120
                    },

                    {
                        title: '文件份数',
                        key: 'adtrtCount',
                        minWidth: 80
                    },  {
                        title: '加盖印章类型',
                        slot: 'SlotZhangType',
                        minWidth: 100
                    },
                    {
                        title: '用印原因',
                        key: 'adtrtReson',
                        minWidth: 80
                    },{
                        title: '申请时间',
                        key: 'addTime',
                        minWidth: 80
                    }, {
                        title: '审核时间',
                        // key:'auditTime',
                        slot: 'adminAudit',
                        minWidth: 80
                    }, {
                        title: '是否审核通过',
                        key: 'status',
                        slot: 'ifPass',
                        minWidth: 80
                    },

                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                        minWidth: 180
                    }
                ],
                columnsListNo: [
                    {
                        title: '序号',
                        key: 'adtrtId',
                        minWidth: 80

                    },
                    {
                        title: '姓名',
                        slot: 'slotUsersName',
                        minWidth: 80

                    },
                    {
                        title: '用印文件名',
                        key: 'adtrtName',
                        minWidth: 120
                    },

                    {
                        title: '文件份数',
                        key: 'adtrtCount',
                        minWidth: 80
                    },
                    {
                        title: '加盖印章类型',
                        slot: 'SlotZhangType',
                        minWidth: 100
                    },
                    {
                        title: '用印原因',
                        key: 'adtrtReson',
                        minWidth: 80
                    },{
                        title: '申请时间',
                        key: 'addTime',
                        minWidth: 80
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        align: 'center',
                        minWidth: 180
                    }
                ],
                loading: false,
            }
        },
        computed: {

            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth() {
                return this.isMobile ? undefined : 100;
            },
            labelPosition() {
                return this.isMobile ? 'top' : 'right';
            },

            limitData() {
                let data = [...this.list];
                return data;
            },
            limitDataNo() {
                let data = [...this.listNo];
                return data;
            },
            // 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data
            dataWithPage() {
                const data = this.limitData;
                const start = this.current * this.size - this.size;
                const end = start + this.size;
                return [...data].slice(start, end);
            },
            dataWithPageNo() {
                const data = this.limitDataNo;
                const start = this.current * this.size - this.size;
                const end = start + this.size;
                return [...data].slice(start, end);
            },
        },
        created() {
            this.getDataYes();
            this.getDataNo();
        },
        methods: {
            //调用数据
            getDataYes() {

                this.current = 1;
                this.loading = true;
                Administrative.findByPage({
                    adtrtType: 3, //行政类型（1：物品领用，2：用车申请，3：永章申请）
                    status: 1, //审核状态（1：通过，2：未审核
                    adtrtName: this.data.adtrtName

                })
                    .then(res => {
                        // 返回数据
                        console.log(res);
                        this.list = res;


                        this.loading = false;
                        this.data.adtrtName = '';
                    })
                    .catch(err => {
                        // 异常情况
                    })
            },
            //未审核数据
            getDataNo() {
                this.current = 1;
                this.loading = true;
                Administrative.findByPage({
                    adtrtType: 3,//行政类型（1：物品领用，2：用车申请，3：永章申请）
                    status: 2,//审核状态（1：通过，2：未审核
                    adtrtName: this.data.adtrtName


                })
                    .then(res => {
                        // 返回数据
                        this.listNo = res;
                        this.loading = false;
                        this.data.adtrtName = '';
                    })
                    .catch(err => {
                        // 异常情况
                    })
            },
            handleSubmit() {
                this.$emit('on-submit', this.data);
            },
            handleReset() {
                this.$refs.form.resetFields();
                this.$emit('on-reset');
            },
            /*新增*/
            handleOpenCreate() {
                this.$router.push('/administrative/chapter/chapter-add')
            },
            // 新增数据
            handleCreate() {
                this.$refs.create.validate((valid) => {
                    if (valid) {
                        if (this.updateIndex < 0) {
                            // 新建
                            const mockData = this.mockOneData();
                            mockData.desc = this.createData.desc;
                            mockData.date = new Date();
                            this.list.splice(0, 0, mockData);
                            this.$Message.success('创建成功');
                        } else {
                            // 修改
                            const updateItemName = this.dataWithPage[this.updateIndex].name;
                            const updateItemIndex = this.list.findIndex(item => item.name === updateItemName);
                            this.list[updateItemIndex].desc = this.createData.desc;
                            this.$Message.success('修改成功');
                        }

                        this.showCreate = false;
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    } else {
                        this.creating = false;
                        this.$nextTick(() => {
                            this.creating = true;
                        });
                    }
                });
            },
            // 审核详情
            showDownDetail(adtrtId) {
                this.$router.push({
                    path: '/administrative/chapter/yes-detail',
                    name: 'chapter-yesDetail',
                    query: {
                        adtrtId
                    }
                });
            },
            // 用户申请审核详情
            showAuditDetail(adtrtId) {
                this.$router.push({
                    path: '/administrative/chapter/no-detail',
                    name: 'chapter-noDetail',
                    query: {
                        adtrtId
                    }
                });
            },
            //编辑
            handleEdit(dxmbTywysbm) {
                const item = dxmbTywysbm;
                console.log(item);
                // this.$router.push('/evaluationDecision/fireInfo-details')
                this.$router.push({
                    path: '/employee/comuser/comuser-add',
                    name: 'comuser-add',
                    params: {
                        item,
                        index: 'edit'
                    }
                });

            },
            //删除
            handleDelete(adtrtId) {
                this.$Modal.confirm({
                    title: '删除',
                    content: '确定删除吗？',
                    onOk: () => {
                        Administrative.deleteReportById({
                            adtrtId
                        })
                            .then(res => {
                                // 返回数据
                                this.$Message.success('删除成功');
                                this.getDataYes();
                                this.getDataNo();
                            })
                            .catch(err => {
                                // 异常情况
                            })

                    }
                });
            },

            //审核
            goReview(adtrtId) {
                this.$router.push({
                    path: '/administrative/chapter/goReview',
                    name: 'chapter/goReview',
                    query: {
                        adtrtId
                    }
                });

            },

        },
    }
</script>


<style lang="less" scoped>
    .buttonContain {
        > button {
            width: 120px;
            height: 40px;
            font-size: 16px;
        }
    }

</style>
